<template>
    <div class="tag-box">
        <el-tag @close="handelClose(tag,index)" :closable="tag.name !== 'home'" class="tags" @click="chageMenu(tag)"  :effect="$route.name==tag.name?'dark' :'plain'" type="success" v-for="(tag,index) in tags" :key="index" >{{ tag.label }}</el-tag>
    </div>
</template>


<script setup>
import {useAside} from '../store/index.js'
const main=useAside()
const tags=main.tabList
import {useRouter,useRoute} from 'vue-router'
const router=useRouter()
const route = useRoute()

// 点击跳转
const  chageMenu =(item)=>{
    main.selectMenu(item)
    router.push(
        {name:item.name}
    )
}
// 关闭tag
const handelCloseTag =(val)=>{
    main.closeTag(val)
}
const handelClose = (tag,index)=>{
    //仓库数组的索引  
    const length =tags.length-1
    //先删除数据 
    handelCloseTag(tag)
    if (tag.name !== route.name) {
        return
    }
    if(index==length){
        router.push(
            {name:tags[index-1].name}
        )
    }else{
        router.push(
            {
                name:tags[index].name
            }
        )
    }
}


</script>


<style lang="less">
.tag-box {
    margin-bottom: 10px;

    .tags {
        margin-right: 5px;
        cursor: pointer;
    }
}
</style>